<template>
  <!-- 简单组件 -->
  <el-input
    v-if="type == 'textarea'"
    type="textarea"
    clearable
    show-word-limit
    :size="size"
    v-model="editValue"
    :style="{'width':width}"
    :placeholder="placeholder ? placeholder : '请输入'"
    :maxlength="maxlength ? maxlength : 4000"
    :minlength="minlength ? minlength : 0"
  />
  <el-input
    v-else-if="type == 'password'"
    show-password
    clearable
    :size="size"
    v-model="editValue"
    :style="{'width':width}"
    :placeholder="placeholder ? placeholder : '请输入密码'"
    :maxlength="maxlength ? maxlength : 32"
    :minlength="minlength ? minlength : 1"
  />
  <el-input-number
    v-else-if="type == 'number'"
    show-password
    :size="size"
    v-model="editValue"
    :placeholder="placeholder ? placeholder : '请输入数字'"
    :style="{'width':width=='100%' ? '180px' : width}"
    :max="max ? max : Infinity"
    :min="min ? min : -Infinity"
    :maxlength="maxlength ? maxlength : 4000"
    :minlength="minlength ? minlength : 0"
    @change="typeof editValue == 'undefined' ? editValue=0 : editValue"
  />
  <el-slider
    v-else-if="type == 'slider'"
    :size="size"
    v-model="editValue"
    :placeholder="placeholder ? placeholder : '请输入数字'"
    :max="max ? max : 100"
    :min="min ? min : 0"
    :range="range"
    :step="step"
  />
  <el-switch
    v-else-if="type == 'switch'"
    v-model="editValue"
    active-color="#13ce66"
    inactive-color="#ff4949"
  />
  <el-rate v-else-if="type == 'rate'" :size="size" v-model="editValue" />
  <el-color-picker
    v-else-if="type == 'color'"
    :size="size"
    v-model="editValue"
  />
  <el-time-picker
    v-else-if="type == 'time' && range"
    :size="size"
    is-range
    :format="showSecond ? 'HH:mm:ss' : 'HH:mm'"
    v-model="editValue"
    :picker-options="pickerOptions"
    :style="{'width':width=='100%' ? '300px' : width}"
    range-separator="至"
    start-placeholde="开始时间"
    end-placeholde="结束时间"
    :placeholder="placeholder ? placeholder : '请选择时间'"
  />
  <el-time-picker
    v-else-if="type == 'time' && !range"
    :size="size"
    :format="showSecond ? 'HH:mm:ss' : 'HH:mm'"
    v-model="editValue"
    :picker-options="pickerOptions"
    :style="{'width':width=='100%' ? '180px' : width}"
    placeholder="请选择时间"
  />
  <el-date-picker
    v-else-if="type == 'date' && range"
    type="daterange"
    :size="size"
    v-model="editValue"
    :style="{'width':width=='100%' ? '300px' : width}"
    range-separator="至"
    start-placeholde="开始日期"
    end-placeholde="结束日期"
    placeholder="请选择日期"
  />
  <el-date-picker
    v-else-if="type == 'date' && !range"
    type="date"
    :size="size"
    v-model="editValue"
    :style="{'width':width=='100%' ? '180px' : width}"
    placeholder="请选择日期"
  />
  <el-date-picker
    v-else-if="type == 'datetime' && range"
    type="datetimerange"
    :size="size"
    v-model="editValue"
    :style="{'width':width}"
    range-separator="至"
    start-placeholde="开始日期"
    end-placeholde="结束日期"
    placeholder="请选择日期"
  />
  <el-date-picker
    v-else-if="type == 'datetime' && !range"
    type="datetime"
    :size="size"
    v-model="editValue"
    :style="{'width':width=='100%' ? '220px' : width}"
    placeholder="请选择日期"
  />
  <el-date-picker
    v-else-if="type == 'year' && !range"
    type="year"
    :size="size"
    v-model="editValue"
    :style="{'width':width=='100%' ? '180px' : width}"
    placeholder="请选择日期"
  />
  <el-date-picker
    v-else-if="type == 'month' && range"
    type="monthrange"
    :size="size"
    v-model="editValue"
    :style="{'width':width=='100%' ? '300px' : width}"
    range-separator="至"
    start-placeholde="开始日期"
    end-placeholde="结束日期"
    placeholder="请选择日期"
  />
  <el-date-picker
    v-else-if="type == 'month' && !range"
    type="month"
    :size="size"
    :style="{'width':width=='100%' ? '180px' : width}"
    v-model="editValue"
    placeholder="请选择日期"
  />
  <el-date-picker
    v-else-if="type == 'week' && !range"
    type="week"
    format="yyyy 第 WW 周"
    :size="size"
    :style="{'width':width=='100%' ? '180px' : width}"
    v-model="editValue"
    placeholder="请选择日期"
  />
  <input v-else-if="type=='hide'" type="hidden" v-model="editValue"/>
  <el-input
    v-else
    :size="size"
    v-model="editValue"
    :style="{'width':width}"
    clearable
    :placeholder="placeholder ? placeholder : '请输入'"
    :maxlength="maxlength ? maxlength : 4000"
    :minlength="minlength ? minlength : 0"
  />
</template>
<script>
export default {
  props: {
    //v-model绑定
    value: {
      type: [String, Number, Boolean, Date, Array],
      required: true,
    },
    //类型
    type: {
      type: String,
      validator: function(value) {
        return (
          [
            "text",
            "textarea",
            "password",
            "switch",
            "number",
            "slider",
            "rate",
            "color",
            "time",
            "date",
            "datetime",
            "year",
            "month",
            "week",
            "hide"
          ].findIndex((item) => item == value) >= 0
        )
      },
      required: true,
    },
    //大小，支持'medium','small','mini',默认medium
    size: {
      type: String,
      validator: function(value) {
        return (
          ["medium", "small", "mini"].findIndex((item) => item == value) >= 0
        );
      },
      default: "medium",
    },
    width:{type:String,default:'100%'},
    //输入前提示语
    placeholder: String,
    //最大值，最小值，只有slider,number有效
    max: Number,
    min: Number,
    //原生属性，最大长度，最小长度
    maxlength: Number,
    minlength: Number,
    //是否为时间段,time,date,datetime,month有效
    range: { type: Boolean, default: false },
    showSecond:{type:Boolean,default:false},
    //slider的步长
    step: { type: Number, default: 1 },
  },
  data() {
    return {
      editValue: this.value,
      pickerOptions: { start: "00:00", step: "00:05", end: "23:55" },
    };
  },
  watch: {
    editValue(val) {
      this.$emit("input", val);
    },
    value(val){
      this.editValue = val
    }
  },
};
</script>
